<template>
  <section>
    <div class="model mywork">
      <img :src="IMGBASE64.WODEGONGZUO2X" class="pink">
      <span class="title">审批列表</span>
      <el-button class="addBtn" type="success" size="small" @click="upshow">新增</el-button>
      <div class="kong"></div>
      <template>
        <el-table :data="tablemsg" style="width: 100%">
          <el-table-column prop="id" label="#" width="70" align="center"></el-table-column>
          <el-table-column prop="itemName" label="类目名称" align="center">
          </el-table-column>
          <el-table-column prop="approvaler" label="审批人" align="center"></el-table-column>
          <el-table-column prop="ccer" label="抄送人" align="center"></el-table-column>
          <el-table-column prop="werther" label="是否有效" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template scope="scope">
              <el-button
                size="small"
                @click="changeData(scope)">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>

    <div class="up" v-show="upShow">
      <img :src="IMGBASE64.GREENXINZENG2X" class="img">
      <span class="title">新增审批人</span>
      <el-button icon="el-icon-close" class="close" @click="upshow"></el-button>
      <header>
        <span class="header-title">基本信息</span>
      </header>
      <el-form label-width="100px">
        <el-form-item label="审批名称">
          <select class="form-longText" v-model="subjectSelect">
            <option v-for="(item, key) in subjectOption" :label="item" :value="key"></option>
          </select>
        </el-form-item>
        <el-form-item label="审批人">
          <el-select v-model="value5" multiple filterable placeholder="请选择" size="small">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="抄送人">
          <input type="text" class="form-longText" v-model="people">
        </el-form-item>
        <div class="clear"></div>
        <el-form-item label="是否有效">
          <div class="choose">
            <el-radio class="radio" v-model="radio" label="1">有效</el-radio>
            <el-radio class="radio" v-model="radio" label="2">无效</el-radio>
          </div>
        </el-form-item>
      </el-form>
      <div class="bottom">
        <div class="right">
          <el-button type="success" @click="keepAddData" size="small">确定</el-button>
        </div>
      </div>
    </div>

    <transition name="modal-shadow">
      <div class="modal-backdrop" v-show="upShow"></div>
    </transition>
  </section>
</template>

<script>
export default {
  data () {
    return {
      upShow2: false,
      filterText: null,
      data2: [{
        id: 1,
        label: '行政部'
      },
      {
        id: 2,
        label: '行政部'
      },
      {
        id: 3,
        label: '行政部'
      },
      {
        id: 4,
        label: '行政部'
      },
      {
        id: 5,
        label: '行政部'
      }],
      radio: '1',
      subjectSelect: null,
      subjectOption: ['复印油纸审批', '打印纸审批', '教学用品审批', '加班申请审批', '校车审批'],
      people: null,
      upShow: false,
      tablemsg: [],
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value5: []
    }
  },
  mounted () {
    this.getTableData()
  },
  methods: {
    changeData (scope) {
      console.log(scope.row)
      this.upShow = !this.upShow
    },
    upshow () {
      this.upShow = !this.upShow
      this.subjectSelect = null
      // this.value5 = null
      this.people = null
    },
    afocuse () {
      this.upShow2 = true
    },
    ablur () {
      this.upShow2 = false
    },
    getTableData () {
      this.$http.post(this._httpUrl + 'schoolConf/workApproval/conf/list', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.tablemsg = response.data.data
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    keepAddData () {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      // this.$http.post(this._httpUrl + 'schoolConf/workApproval/conf/update', {}, {'headers': {'yxt-xtoken': _cookieArray[0].value}}).then(function (response) {
      //   if (response.body.code === '000') {
      //     this.getTableData()
      //   } else {
      //     this.$route.push('/login')
      //   }
      // })
    }
  }
}
</script>

<style lang="less" scoped>
@import '/static/css/all-use.css';
</style>

<style scoped>
  .choose{
    margin-left: 12%;
  }
  .secondLine{
    width: 55%;
    float: left;
  }
  .clear{
    clear: both;
  }
  .secondLine .filter-tree{
    margin-left: 15.6%;
    width: 50%; height: 40%;
    overflow: auto;
  }
  .addBtn{
    position: absolute; right: 2%;
  }
  div[data-v-22bf8d34] ul
  {
    position: relative;
    left: 12%;
  }
  div[data-v-22bf8d34]
  {
    padding-bottom: 10px;
  }
  .el-upload--picture-card
  {
    margin-left: 9%; 
    margin-top: 40px;
    width: 80px; height: 80px;
  }
  .el-upload--picture-card i
  {
    position: relative; top: -28px;
  }
  .tree{
    position: relative; left: 60%;
    width: 40%;
  }
  .span{
    opacity: 0;
  }

  .up{
    width: 35%;
    position: fixed;
    top: 10%;
    left: 50%;
    margin-left: -17%;
    background: #FFF;
    padding: 20px 20px 0 20px;
    border-radius: 5px;
    z-index: 99999;
  }
  .up .img{
    position: absolute;
    left: 24px;
    top: -20px;
  }
  .up .title{
    margin-left: 90px;
  }
  .up header{
    height: 24px;
    border-bottom: 2px solid #D7D7D7;
    padding: 30px 0 10px 0;
    margin-left: 1%;
    margin-right: 10px;
    margin-bottom: 10px;
  }
  .up .header-title{
    height: 24px;
    display: inline-block;
    color: #FB7862;
    border-bottom: 2px solid #FB7862;
    padding: 0 10px 10px 10px;
    margin-left: 0;
  }
  .up .form{
    margin-left: 10%;
    margin-right: 10px;
  }
  .up .form .firstLine{
    padding: 30px 0 10px 0;
  }
  .up .form .secondLine{
    width: 100%;
    padding: 30px 0 10px 0;
  }
  .form-longText{
    width: 217px;
    border: 0;
    border-bottom: 1px solid #D7D7D7;
  }
  .form-text{
    width: 217px;
    border: 0;
    border-bottom: 1px solid #D7D7D7;
  }
  .up ul{
    margin-top: 30px;
    margin-left: 75px;
  }
  .up ul li{
    float: left;
  }
  .up .bottom{
    border-top: 1px solid #D7D7D7;
    margin-top: 20px;
    background: #F8F8F8;
    padding: 8px 0;
    margin-left: -20px;
    margin-right: -20px;
    border-radius: 0 0 5px 5px;
  }
  .up .bottom .right{
    text-align: right;
    padding: 0 10px 0 0;
  }
</style>
